import React ,{useState, useEffect} from 'react'
import {Link} from 'react-router-dom'
import LazyLoad from 'react-lazyload';
import waitImg from '@/assets/wait.gif'

const TodoList = (props) => {
return (
        <div className='event-list'>
        { 
           props.eventslist.map((item)=>{
            const {url,dec,id, price,text,pos}= item
                return (
                    <Link  
                    to={`/eventdetail/${id}/moviedetail`}
                    key={id}
                    className="nav-box">
                    <div key={id}>
                    <div className='list'>
                    <LazyLoad placeholder={
                        <img width="100%" height="100%"
                            src={waitImg}
                     />}>
                        <img src = {url}/>
                    </LazyLoad>
                    <span className='desc'>
                    <p className='text'>{text}</p>
                    <p className='detail'>{dec}</p>
                    <p className='detail'>{pos}</p>
                    <p className='price'> 
                        <span  style={{background:'#fff2f1',color:'#fca48f'}}>售票中：</span>
                        {price}
                    </p>
                </span>
                </div>
                    </div>
                    </Link>
                )
                    
            })
        }
        </div>
                           
    )
}

export default TodoList
